<template>
	<view class="spelling_box">
		<view class="box">
			<view class="tabbar flex_ac_jc">
				<view :class="['tab_item', current === 0 ? 'tab_item_active' : '']">学</view>
				<view class="divider"></view>
				<view :class="['tab_item', current === 1 ? 'tab_item_active' : '']">读</view>
				<view class="divider"></view>
				<view :class="['tab_item', current === 2 ? 'tab_item_active' : '']">练</view>
				<view class="divider"></view>
				<view :class="['tab_item', current === 3 ? 'tab_item_active' : '']">拼</view>
			</view>
			<swiper class="swiper" :current="current" @change="swiperChange">
				<swiper-item>
					<view class="swiper-item xue_item">
						<view class="heade_swiper">
							<view class="word_box">
								<view class="word_line">
									<view class="line line_one"></view>
									<view class="line line_two"></view>
									<view class="line line_three"></view>
									<view class="line line_four"></view>
								</view>
								<view class="word_name">{{wordInfo.word}}</view>
							</view>
							<view class="word_phonetic flex_ac_jc">
								<text>[{{ wordInfo.phonetic}}]</text>
								<uni-icons type="sound-filled" color="#66657f" size="20" />
							</view>
							<view class="word_text">{{ wordInfo.annotation }}</view>
						</view>
						<view class="xue_item">
							<view class="title">音节拆分</view>
							<view class="syllable_box">
									<view class="syllable" v-for="(item,index) in syllable" :key="index">{{item}}</view>
							</view>
						</view>
						<view class="xue_item">
							<view class="title">自然拼读</view>
							<view class="word_split">
								<view class="split_word" v-for="(item,index) in wordSplit" :key="index">{{item}}</view>
							</view>
							<view class="syllable_split">
								<view class="brackets">[</view>
								<view class="split_syllable" v-for="(item,index) in syllableSplit" :key="index">{{item}}</view>
								<view class="brackets">]</view>
							</view>
						</view>
						<view class="xue_item">
							<view class="title">词根助记</view>
							<view class="mnemonic">{{wordInfo.mnemonic}}</view>
						</view>
						<view style="text-align: end; margin-top: 50rpx;">
							<uni-icons type="info-filled" size="42" color="#4d4dff"
								@tap="goToPage('/pages/wordDetails/wordDetails?id=' + wordInfo.id+'&status='+status+'&hardStatus='+hardStatus)"></uni-icons>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="heade_swiper">
							<view class="word_box">
								<view class="word_line">
									<view class="line line_one"></view>
									<view class="line line_two"></view>
									<view class="line line_three"></view>
									<view class="line line_four"></view>
								</view>
								<view class="word_name">{{wordInfo.word}}</view>
							</view>
							<view class="word_phonetic flex_ac_jc" @click="playAudio(wordInfo.word)">
								<text>[{{ wordInfo.phonetic }}]</text>
								<uni-icons type="sound-filled" color="#808080" size="24" />
							</view>
							<view class="word_text">{{ wordInfo.annotation }}</view>
						</view>
						
						
							<view class="rate" style="display: flex;align-items: center;" v-if="!isRecording && isStart">
									<uni-rate :readonly="true" :value="5 * rate / 100" :max="5" allow-half/>  
									<text style="color: #FFCA3E;font-size: 50rpx;margin-left: 10rpx;"> {{rate}}分</text>
							</view>
							
							<view class="du_item record flex_ac_jc">
								<view class="audio_item" @tap="playPronounce" v-show="!isRecording && isStart">
									<view class="icon">
										<uni-icons type="sound-filled" color="#d77f18" size="28" />
									</view>
									<view class="audio_text">标准发音</view>
								</view>
								
								<view class="record_item" @tap="startRecord" v-show="!isRecording">
									<view class="icon_1">
										<uni-icons type="mic-filled" color="#ffffff" size="54" />
									</view>
									<view class="record_text">点击录音</view>
								</view>
								<view class="record_item" @tap="endRecord" v-show="isRecording">
									<view class="icon_2"></view>
									<view class="record_text">点击结束</view>
								</view>
								<view class="audio_item" @tap="playVoice" v-show="!isRecording && isStart">
									<view class="icon">
										<uni-icons type="headphones" color="#d77f18" size="28" />
									</view>
									<view class="audio_text">我的发音</view>
								</view>
							
								<!-- <button @tap="endRecord" v-show="isRecording">停止录音</button> -->
								<!-- <button @tap="playVoice">播放录音</button> -->
								<!-- <button @tap="upVoice">上传</button> -->
							</view>
						
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="heade_swiper">
							<view class="word_box">
								<view class="word_line">
									<view class="line line_one"></view>
									<view class="line line_two"></view>
									<view class="line line_three"></view>
									<view class="line line_four"></view>
								</view>
								<view class="word_name">{{wordInfo.word}}</view>
							</view>
							<view class="word_phonetic flex_ac_jc">
								<text>[{{ wordInfo.phonetic }}]</text>
								<uni-icons type="sound-filled" color="808080" size="24" />
							</view>
						</view>
						<view class="lian_item xue_item">
							<view class="lian_item_list" v-for="(item, index) in lianList" :key="index" @click="checkWord(item)">
								{{ item }}
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="pin_item">
							<view class="icon" @tap="isHide = !isHide">
								<uni-icons :type="isHide ? 'eye' : 'eye-slash'" color="#808080" size="28" />
							</view>
							<view class="item_inp1 flex_ac_jc">
								<view class="item" v-for="(item, index) in letterList" :key="index">
									<view class="after">{{inputList[index]}}</view>
								</view>
								
								<view style="margin-left: 50rpx;" v-if="spShow">
									<uni-icons v-if="spellShow" type="checkbox" size="40" color="#FF9E20"></uni-icons>
									<uni-icons v-else type="close" size="40" color="#FF9E20"></uni-icons>
								</view>
							</view>
							<view class="pin_item_text">
								<view class="text1" v-show="isHide">{{wordInfo.phonetic}}</view>
								<view class="text2">{{wordInfo.annotation}}</view>
							</view>
						</view>

						<view class="pin_item">
							<view class="icon" @tap="onCleanWord">
								<uni-icons type="refreshempty" color="#808080" size="28" />
							</view>
							<view class="item_inp2 flex_ac_jc">
								<view class="item" v-for="(item, index) in letterList" :key="index"
									@tap="letterSelect(item)">{{ item }}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="btns flex_ac_js">
			<view class="icons">
				<view class="icon_item" @tap="showWordList">
					<uni-icons type="list" color="#572f6b" size="28" />
				</view>
				<view class="icon_item" @tap="addNewWord(status)">
					<uni-icons :type="status ==1 ? 'star-filled' : 'star'"
						:color="status ==1  ? '#6BD52B' : '#40515b'" size="28" />
				</view>
				<view class="icon_item" @tap="addfamiliarWord(hardStatus)">
					<uni-icons :type="hardStatus==1 ? 'wallet-filled' : 'wallet'"
						:color="hardStatus==1 ? '#6BD52B' : '#40515b'" size="28" />
				</view>
			</view>
			<view class="flex_ac">
				<view class="btn" @tap="prevWord">
					<uni-icons type="left" size="12" color="#ffffff"></uni-icons>
					<text> 上一词</text>
				</view>
				<view class="btn" @tap="nextWord" v-if="wordIndex + 1 !== words.length">
					<text>下一词 </text>
					<uni-icons type="right" size="12" color="#ffffff"></uni-icons>
				</view>
				<view class="btn" v-if="wordIndex + 1 === words.length" @tap="goDictation">开始听写</view>
			</view>
		</view>

		<uni-popup ref="wordPopup" background-color="#fff">
			<view class="spelling_popup">
				<view class="popup_title">单词列表</view>
				<scroll-view scroll-y style="height: calc(100% - 100rpx);">
					<view class="popup_word_item" v-for="(item, index) in words" :key="index" @tap="onTapWord(index)"
						:style="{'borderColor' : wordIndex === index ? '#0000ffb0' : '#d7d7d7'}">
						<view class="text"
							:style="{'color': wordIndex === index ? '#0000ffb0' : '#333', 'fontWeight': 'bold', 'fontSize': '32rpx', 'marginBottom': '6rpx'}">
							{{ item.word }}</view>
						<view class="text" :style="{'color': wordIndex === index ? '#0000ffb0' : '#333'}">
							{{ item.annotation }}</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		listWord,
		reciteWord,
		reviewWordPlan,
		wordByPlan,
		reviewWordBook,
		readWord,
		spellingStudy,
		wordTrain,
		wordTrainCheck,
		addCollect,
		addHard,
		getStatus,
		cancelStatus,
		cancelHardWord,
		getHardStatus
	} from '@/api/word/word.js'
	import config from '@/utils/config.js'
	import permision from '@/js_sdk/wa-permission/permission.js'
	import { updateLearn } from '@/api/user/user.js'

	 

	export default {
		data() {
			return {
				status:'',
				hardStatus:'',
				spShow:false,
				spellShow:false,
				inputList:[],
				bookId:'',
				trainListOptions:[],
				rate:0,
				audioFileContent:null,
				isStart:false,
				rIndex: false,
				current: 0,
				wordIndex: 0,
				words: [],
				wordInfo: {},
				letterListShow: [],
				letterList: ['k', 'oo', 'b'],
				lianList: ['v. 申请；应用；涂，敷', 'n. 书，本子', 'n. 印象'],
				isHide: false,
				isAddNewWord: false,
				isAddfamiliarWord: false,
				isRecording: false,
				recorderManager: null,
				innerAudioContext: null,
				voicePath: '',
				state: {
					id: '',
					type: ''
				},
				studyWordList:[],
				// wordsInfoList: [{
				// 		annotation: "v. 收集",
				// 		antonym: null,
				// 		exampleSentence: "例句：He collects stamps as a hobby. 翻译：他收集邮票作为爱好。",
				// 		id: 74246,
				// 		mnemonic: "联想记忆：collect（收集）→ 与“聚集”相关。",
				// 		phonetic: "/kəˈlekt/",
				// 		splitting: "col/lect",
				// 		symbol: "/kə/ /ˈlekt/",
				// 		synonymous: "gather",
				// 		word: "collect"
				// 	},

				// 	{
				// 		annotation: "adj. 令人兴奋的",
				// 		antonym: null,
				// 		exampleSentence: "例句：The movie was very exciting. 翻译：这部电影非常令人兴奋。",
				// 		id: 75198,
				// 		mnemonic: "联想记忆：exciting（令人兴奋的）→ excite（使兴奋）+ ing（形容词后缀）。",
				// 		phonetic: "/ɪkˈsaɪtɪŋ/",
				// 		splitting: "exci/ting",
				// 		symbol: "/ɪk/ /ˈsaɪt/ /tīŋ/",
				// 		synonymous: null,
				// 		word: "exciting"
				// 	},
				// 	{
				// 		annotation: "v. 收集",
				// 		antonym: null,
				// 		exampleSentence: "例句：He collects stamps as a hobby. 翻译：他收集邮票作为爱好。",
				// 		id: 74246,
				// 		mnemonic: "联想记忆：collect（收集）→ 与“聚集”相关。",
				// 		phonetic: "/kəˈlekt/",
				// 		splitting: "col/lect",
				// 		symbol: "/kə/ /ˈlekt/",
				// 		synonymous: "gather",
				// 		word: "collect"
				// 	},

				// 	{
				// 		annotation: "adj. 令人兴奋的",
				// 		antonym: null,
				// 		exampleSentence: "例句：The movie was very exciting. 翻译：这部电影非常令人兴奋。",
				// 		id: 75198,
				// 		mnemonic: "联想记忆：exciting（令人兴奋的）→ excite（使兴奋）+ ing（形容词后缀）。",
				// 		phonetic: "/ɪkˈsaɪtɪŋ/",
				// 		splitting: "exci/ting",
				// 		symbol: "/ɪk/ /ˈsaɪt/ /tīŋ/",
				// 		synonymous: null,
				// 		word: "exciting"
				// 	},
				// 	{
				// 		annotation: "v. 收集",
				// 		antonym: null,
				// 		exampleSentence: "例句：He collects stamps as a hobby. 翻译：他收集邮票作为爱好。",
				// 		id: 74246,
				// 		mnemonic: "联想记忆：collect（收集）→ 与“聚集”相关。",
				// 		phonetic: "/kəˈlekt/",
				// 		splitting: "col/lect",
				// 		symbol: "/kə/ /ˈlekt/",
				// 		synonymous: "gather",
				// 		word: "collect"
				// 	},

				// ],


			}
		},
		onShow() {
			// this.state = uni.getStorageSync('words')
			// if (this.state.type === 'planReview') {
			// 	this.getWordDetailsPlan()
			// } else if (this.state.type === 'bookReview') {
			// 	this.getWordDetailsReview()
			// } else if (this.state.type === 'planStudy') {
			// 	this.getWordByPlan()
			// } else if (this.state.type === 'bookStudy') {
			// 	this.getWordData()
			// }
			
			this.state = uni.getStorageSync('words')
			if (this.state.type === 'planReview') {
				this.getWordDetailsPlan()
			} else if (this.state.type === 'bookReview') {
				this.getWordDetailsReview()
			} else if (this.state.type === 'planStudy') {
				this.getWordByPlan()
				this.getTrain()
			} else if (this.state.type === 'bookStudy') {
				this.getWordData()
			} else if (this.state.type === 'wordChoice') {
				this.getNewWord()
				this.getTrain()
			}
			
		},
		onLoad(options) {   //wordChoice
			this.bookId = options.bookId
			
			// this.state = uni.getStorageSync('words')
			// if (this.state.type === 'planReview') {
			// 	this.getWordDetailsPlan()
			// } else if (this.state.type === 'bookReview') {
			// 	this.getWordDetailsReview()
			// } else if (this.state.type === 'planStudy') {
			// 	this.getWordByPlan()
			// 	this.getTrain()
			// } else if (this.state.type === 'bookStudy') {
			// 	this.getWordData()
			// } else if (this.state.type === 'wordChoice') {
			// 	this.getNewWord()
			// 	this.getTrain()
			// }
			
			
			// this.wordsInfoList = uni.getStorage("wordsInfoList")
			
			
			//获取拆分的单词
			
		},
		methods: {
			//收藏单词学习
			async getNewWord(){
				this.words= uni.getStorageSync("wordsInfoList")
				
				
				this.words = this.words.map(item => ({
				    id: item.id,
				    annotation: item.annotation,
					exampleSentence: item.exampleSentence,
					mnemonic: item.mnemonic,
					phonetic: item.phonetic,
					word: item.word
				}));
				console.log("传递的列表",this.words);
				await spellingStudy(0,this.words).then(res => {
					console.log("dddddddddddd", res);
					if(res.code === 200) {
						console.log("数据",res.data);
						this.studyWordList =  res.data
						this.wordInfo = this.studyWordList[this.wordIndex]
					}
					
				})
				this.showStatus(this.wordInfo.id)
				this.showHardStatus(this.wordInfo.id)
				this.getSpellWord()
			},
			
			
			getSpellWord(){
				
				if(this.wordInfo.splitting) {
					this.letterList = this.wordInfo.splitting.split('/')
				}
			},
			checkWord(item){
				console.log("1111111111",item);
				// console.log("id",this.trainListOptions[this.wordIndex].id);
				
				console.log(this.trainListOptions[this.wordIndex]);
				if(item === this.trainListOptions[this.wordIndex].annotation) {
					uni.showToast({
						title:"选对啦",
						icon:'success',
						duration:1000
					})
				} else {
					uni.showToast({
						title:"选错啦",
						icon:'error',
						duration:1000
					})
				}
				// let data = {
				// 	wordId:this.trainListOptions[this.wordIndex].id,
				// 	userAnswer:item
				// }
				// wordTrainCheck(data).then(res=>{
				// 	console.log("iiiiiiiiiddddddddd",res);
				// 	if(res.code == 200) {
				// 		if(res.data.correct) {
				// 			alert("正确......")
				// 		}
				// 	}
				// })
			},
			getTrain(){
				console.log("当前单词信息",this.wordInfo);
				let list = uni.getStorageSync('wordsInfoList')
				
				const newList = list.map(item => {
				    return {
				        id: item.id,
				        word: item.word,
				        annotation: item.annotation
				    };
				});
				wordTrain(newList).then(res=>{
					console.log("ddddd",res);
					if (res.code === 200) {
						this.trainListOptions = res.data
						this.getCurrentOptions()
					}
				})
			},
			
			getCurrentOptions(){
				this.lianList = this.trainListOptions[this.wordIndex].options
			},
			async playAudio(word) {
			let accent = "us"
			      try {
					  innerAudioContext.src=`http://192.168.3.95:8081/api/studyWord/getWordAudio?word=${word}&usORuk=${accent}`
					  innerAudioContext.play()
			      } catch (error) {
			      }
			},
			
			
			
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 单词加入生词库|熟词库
			async setReciteWord(type,bool) {
				console.log("当前单词",this.wordInfo);
				//加入生词库
				if (type === 1) {
					if (bool) {
						let data ={
							word:this.wordInfo.word,
							pronunciation:this.wordInfo.phonetic,
							translation:this.wordInfo.annotation,
							wordId:this.wordInfo.id,
							bookId:this.bookId
						}
						console.log("传递的数",data);
						await addCollect(data).then(res=>{
							console.log("dddd",res);
							if(res.code ===200) {
								uni.showToast({
									title:"添加收藏成功",
									icon:'success',
									duration:1000
								})
								// setTimeout(this.showStatus(this.wordInfo.id),3000)
								this.status = 1
							}
						})
					}  else {
						await cancelStatus(this.wordInfo.id).then(res=>{
							if(res.code === 200) {
								uni.showToast({
									title:"取消收藏成功",
									icon:'success',
									duration:1000
								})
								this.status = 0
								// setTimeout()
								// this.showStatus(this.wordInfo.id)
								// setTimeout(this.showStatus(this.wordInfo.id),3000)
							} else {
								uni.showToast({
									title:res.msg,
									icon:'error',
									duration:1000
								})
							}
						})
					}
				} else {  //加入难词库    
					if(bool) {
						console.log("加入难词库");
						let data ={
							wordId:this.wordInfo.id,
							bookId:this.bookId
						}
						console.log("传递的数",data);
						await addHard(data).then(res=>{
							console.log("dddd",res);
							if(res.code ===200) {
								uni.showToast({
									title:"添加难词库成功",
									icon:'success',
									duration:1000
								})
								this.hardStatus = 1
								// this.showHardStatus(this.wordInfo.id)
							}
						})
					} else {
						console.log("取消难词库");
						await cancelHardWord(this.wordInfo.id).then(res=>{
							if(res.code === 200) {
								uni.showToast({
									title:"取消难词库成功",
									icon:'success',
									duration:1000
								})
								this.hardStatus =0
								// this.showHardStatus(this.wordInfo.id)
								
							} else {
								uni.showToast({
									title:res.msg,
									icon:'error',
									duration:1000
								})
							}
						})
					}
				}
				
				
				// let data = {
				// 	wordId: this.wordInfo.wordId
				// }
				// if (params.status) {
				// 	data = {
				// 		...data,
				// 		status: params.status
				// 	}
				// } else if (params.learned === 0) {
				// 	data = {
				// 		...data,
				// 		learned: params.learned
				// 	}
				// }
				
				// console.log("传递的参数",data);
				
				// const {
				// 	code
				// } = await reciteWord(data)
				// if (code === 200 && params.title) {
				// 	this.showToast(params.title, 'none')
				// }
			},
			// 单词列表
			async getWordData() {
				let params = {
					page: 1,
					size: 2000,
					data: this.state.id
				}
				const {
					data
				} = await listWord(params)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			
			//查询单词状态
			async showStatus(wordId){
				await getStatus(this.wordInfo.id).then(res=>{
					console.log("statusstatus",res);
					this.status = res.data
				})
			},
			//查询难词状态
			async showHardStatus(wordId){
				await getHardStatus(this.wordInfo.id).then(res=>{
					console.log("hardhard",res);
					if (res.code == 200) {
						this.hardStatus = res.data
					} 
				})
			},
			// 计划学习
			async getWordByPlan() {
				this.words = uni.getStorageSync('wordsInfoList')
				// console.log("dddd",this.words);
				// this.wordInfo = this.wordsInfoList[this.wordIndex]
				
				// 静态数据 方便测试
				// this.studyWordList = this.wordsInfoList
				// this.wordInfo = this.studyWordList[this.wordIndex]
				
				
				
				//上线真实数据
				await spellingStudy(1,this.words).then(res => {
					console.log("dddddddddddd", res);
					if(res.code === 200) {
						this.studyWordList =  res.data
						this.wordInfo = this.studyWordList[this.wordIndex]
					}
					
				})
				this.showStatus(this.wordInfo.id)
				this.showHardStatus(this.wordInfo.id)
				this.getSpellWord()
				
				
				
				// const { data } = await wordByPlan(this.state.id)
				// this.words = data
				// if (this.words && this.words.length > 0) {
				// 	this.wordInfo = this.words[this.wordIndex]
				// } else {      
				// 	this.wordInfo = null
				// }
			},
			// 课本复习
			async getWordDetailsReview() {
				const {
					data
				} = await reviewWordBook(this.state.id)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			// 计划复习
			async getWordDetailsPlan() {
				const {
					data
				} = await reviewWordPlan(this.state.id)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			showToast(title, icon) {
				uni.showToast({
					title,
					icon
				})
			},
			onCleanWord() {
				// console.log("ddddd");
				this.inputList = []
				this.spShow = false
				this.spellShow = false
			},
			letterSelect(index) {
				// this.letterList.splice(index, 1)
				this.inputList.push(index)
				
				if (this.inputList.length ==this.letterList.length) {
					this.spShow = true
					//判断是否正确
					let str = this.inputList.join('')
					console.log(str,this.wordInfo.word);
					if (str === this.wordInfo.word) {
						this.spellShow = true
						
						updateLearn(this.wordInfo.id)
						// console.log("当前单词",this.wordInfo);
					}
				}
			},
			showWordList() {
				this.$refs.wordPopup.open('left')
			},
			// 重置
			onReset() {
				this.current = 0
				this.isAddNewWord = false
				this.isAddfamiliarWord = false
			},
			onTapWord(index) {
				this.wordIndex = index
				this.wordInfo = this.words[index]
				this.onReset()
				this.$refs.wordPopup.close()
			},
			addNewWord(status) {
				console.log(status);
				
				// this.isAddNewWord = !this.isAddNewWord
				let bool = false
				if (status == 0) {
					bool = true
				}
				
				//type =1 为生词    true为加入
				this.setReciteWord(1,bool)
				// this.setReciteWord({
				// 	status,
				// 	title: status === 0 ? '取消加入生词本' : '加入生词本'
				// })
			},
			addfamiliarWord(status) {
				// this.isAddfamiliarWord = !this.isAddfamiliarWord
				let bool = false
				if (status == 0) {
					bool = true
				}
				this.setReciteWord(2,bool)
				// this.setReciteWord({
				// 	status,
				// 	title: status === 0 ? '取消加入熟词库' : '加入熟词库'
				// })
			},
			prevWord() {
				this.onReset()
				this.wordIndex = Math.max(this.wordIndex - 1, 0)
				this.wordInfo = this.studyWordList[this.wordIndex]
				this.getCurrentOptions()
				this.showStatus(this.wordInfo.id)
				this.showHardStatus(this.wordInfo.id)
				this.getSpellWord()
				this.onCleanWord()
			},
			nextWord() {
				this.wordIndex = Math.min(this.wordIndex + 1, this.words.length)
				this.wordInfo = this.studyWordList[this.wordIndex]
				if (this.wordIndex <= this.words.length - 1 && this.current === 3) {
					this.setReciteWord({
						learned: 0
					})
				}
				this.getCurrentOptions()
				this.getSpellWord()
				this.showStatus(this.wordInfo.id)
				this.showHardStatus(this.wordInfo.id)
				this.onReset()
				this.onCleanWord()
				console.log("下一个",this.wordInfo);
			 
			},
			goDictation() {
				if (this.current === 3) {
					this.setReciteWord({
						learned: 0
					})
				}
				this.goToPage('/pages/practices/dictationExercise/dictationExercise')
			},

			// 获取用户权限
			async requestAndroidPermission() {
				// #ifdef APP-ANDROID
				const resultAndroid = await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
				if (resultAndroid == -1) {
					uni.showModal({
						content: '请打开麦克风权限',
						showCancel: false
					});
				} else if (resultAndroid === 1) {
					this.isRecording = true
				}
				// #endif
				// #ifdef APP-IOS
				const resultIos = permision.judgeIosPermission("record")
				if (!resultIos) {
					uni.showModal({
						content: '请打开麦克风权限',
						showCancel: false
					});
				} else {
					this.isRecording = true
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.record',
					success() {
						this.isRecording = true
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '请授权录音权限',
							success(res) {
								console.log("录音开始......");
								if (res.confirm) {
									uni.openSetting()
								}
							}
						})
					}
				})
				// #endif
			},
			async uploadReadWord(voicePath) {
				try {
					const respon = await readWord(this.wordInfo.wordId, voicePath)
					console.log('res', respon);
					uni.showModal({
						content: respon
					})
				} catch (err) {
					console.log('err')
				}

			},
			// 开始录音
			startRecord() {
				this.isStart = true
				this.isRecording = true
				this.requestAndroidPermission()
				this.recorderManager = uni.getRecorderManager()
				this.recorderManager.start({
					duration: 5000,
					format: 'm4a'
				})
			},
			// 结束录音
			endRecord() {
				let that = this
				this.isRecording = false
				this.isStart = true
				this.recorderManager.stop();
				this.recorderManager.onStop(res => {
					that.voicePath = res.tempFilePath
					console.log(".................");
					console.log("路径",that.voicePath);
					this.uploadRecording()
					
				})
		 
			},
			readAudioFile() {
			      if (this.voicePath) {
			        const fs = uni.getFileSystemManager();
			        fs.readFile({
			          filePath: this.voicePath,
			          success: (res) => {
			            this.audioFileContent = res.data;
			            console.log('成功读取录音文件内容',this.audioFileContent);
			          },
			          fail: (err) => {
			            console.error('读取录音文件失败:', err);
			          }
			        });
			      }
			    },
			
			// 播放发音
			playVoice() {
				// this.innerAudioContext = uni.createAudioContext()
				// this.innerAudioContext.autoplay = true
				// if(this.voicePath) {
				// 	this.innerAudioContext.src = this.voicePath
				// 	this.innerAudioContext.autoplay = true
				// }
			},
			// 标准发音
			playPronounce() {

			},
			uploadRecording() {
			      if (this.voicePath) {
			        uni.uploadFile({
			          url: 'http://192.168.3.95:8081/api/studyWord/readWord',
			          filePath: this.voicePath,
			          name: 'file', 
			          formData: {
			            word: 'word'
			          },
			          success: (res) => {
			            console.log('录音上传成功:', res);
			            uni.showToast({
			              title: '上传成功',
			              icon: 'success'
			            });
						if(res.statusCode === 200) {
							
							let json =  JSON.parse(res.data)
							this.rate = json.totalScore //  20/100   = x/5
							//this.rate = 5 * score / 100
							console.log('评分',this.rate);
						}
			          },
			          fail: (err) => {
			            console.error('文件上传失败:', err);
			            uni.showToast({
			              title: '上传失败',
			              icon: 'none'
			            });
			          }
			        });
			      } else {
			        uni.showToast({
			          title: '请先录制音频',
			          icon: 'none'
			        });
			      }
			    },
			
		},
		computed:{
			//音节以空格为分隔符进行拆分
			syllable(){
				if(this.wordInfo.symbol) {
					return this.wordInfo.symbol.split(" ")
				}
				
			},
			//字母拆分
			wordSplit(){
				if(this.wordInfo.splitting){
					return this.wordInfo.splitting.split("/")
				}
				
			},
			//去掉/的音节数组
			syllableSplit(){
				if(this.wordInfo.symbol) {
					return this.wordInfo.symbol.split(" ").map(item=>{
						return item.replace(/\//g,'')
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.spelling_box {
		height: 100vh;
		background: $uni-bg-color-page;
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 142rpx);

		.box {
			height: 100%;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			box-shadow: 4rpx 8rpx 16rpx #ababab;

			.tabbar {
				height: 80rpx;

				.tab_item {
					width: 48rpx;
					height: 48rpx;
					line-height: 44rpx;
					text-align: center;
					border: 2rpx solid #797979;
					border-radius: 50%;
					font-size: 28rpx;
				}

				.divider {
					width: 58rpx;
					height: 2rpx;
					background-color: #797979;
					margin: 0 10rpx;
				}

				.tab_item_active {
					background-color: #4eab21;
					color: $uni-text-color-inverse;
				}
			}
 

			.swiper {
				height: calc(100% - 80rpx);

				.swiper-item {
					height: 100%;
					padding-top: 60rpx;
					position: relative;

					.heade_swiper { 
						.word_box{
							width: 200px;
							 height: 84px;
							 padding: 2px 2px 2px 2px;
							 border-radius: 5px;
							 background-color: #d6ffe6;
							 box-sizing: border-box;
							 margin: 0 auto;
							 position: relative;
							.word_line{
								width: 100%;
								height: 100%;
								padding: 10px 5px;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								 justify-content: space-between;
								 .line{
									 width: 100%;
									 height: 1px;
									 box-sizing: border-box;
								 }
								 .line_one,.line_four{
									 border-top: 1px dashed rgba(0, 0, 0,0.5);
								 }
								 .line_two,.line_three{
									 border-top: 1px dotted rgba(0, 0, 0,0.5);
								 }
							}
							 .word_name {
								 width: 100%;
								 color: rgba(65,77,247,1);
							 		text-align: center;
							 		font-size: 35px;
							 		font-weight: bold;
									position: absolute;
									top: 50%;
									left: 0;
									transform: translate(0,-60%);
							 }
						}

						.word_phonetic {
							width: 300rpx;
							padding: 4rpx 20rpx;
							margin: 30rpx auto;
							background-color: #cccbff;
							text-align: center;
							border-radius: 10rpx;
							font-size: 28rpx;

							text {
								margin-right: 10rpx;
							}
						}

						.word_text {
							width: 80%;
							margin: 0 auto;
							font-size: 28rpx;
							color: #636363;
							text-align: center;
						}
					}

					.xue_item {
						margin-top: 20rpx;
						border-top: 2rpx solid #ebebeb;
						border-bottom: 2rpx solid #ebebeb;
						background-color: #f7f7f7;
						padding: 20rpx 0;

						.title {
							width: 138rpx;
							font-size: 28rpx;
							display: inline-block;
							border: 2rpx solid #929292;
							border-radius: 6rpx;
							text-align: center;
							margin-bottom: 14px;
						}
						.syllable_box{
							display: flex;
							justify-content: space-around;
							width: fit-content;
							height: auto;
							opacity: 0.8;
							  padding:5px 5px;
							  border-radius: 20px;
							  background-color: #d7d7d7;
							  box-sizing: border-box;
							  margin: 0 auto;
							  .syllable{
								  width: auto;
								   padding: 3px 6px;
								   margin:0 5px ;
								    border-radius: 20px;
								    background-color: rgba(175, 173, 255, 0.99);
								    box-sizing: border-box;
								    font-family: "Arial Normal", "Arial", sans-serif;
									font-size: 13px;
								    color: #333333;
								    text-align: center;
							  }
						}
						.mnemonic{
							font-size: 13px;
							color: #333333;
						}
						.word_split{
							display: flex;
							justify-content: center;
							.split_word{
								height: 28px;
								  padding:0 18px;
								  margin: 0 2px;
								  border-radius: 5px 5px 0 0;
								  background-color: #91deff;
								  box-sizing: border-box;
								  font-family: "Arial", sans-serif;
								  color: rgba(0, 0,255,  0.7);
								  text-align: center;
								  line-height: 28px;
							}
						}
						.syllable_split{
							display: flex;
							justify-content: center;
							align-items: center;
							.split_syllable{
								height: 28px;
								  padding:0 18px;
								  margin: 0 2px;
								  border-radius: 0 0 5px 5px;
								  background-color: #afadff;
								  box-sizing: border-box;
								  font-family: "Arial", sans-serif;
								  color: rgba(0, 0,255,  0.7);
								  text-align: center;
								  line-height: 28px;
							}
							.brackets{
								height: 40px;
								font-size: 32px;
								color:#333333;
								line-height: 32px;
								opacity: 0.5;
							}
						}
					}
					.rate{
						position: absolute;
						left: 40%;
						bottom: 26%;
						transform: translateX(-50%);
					}
					.record {
						position: absolute;
						left: 50%;
						bottom: 5%;
						transform: translateX(-50%);

						.audio_item {
							width: 200rpx;

							.icon {
								width: 88rpx;
								height: 88rpx;
								margin: 0 auto;
								line-height: 80rpx;
								border: 4rpx solid #d77f18;
								border-radius: 50%;
								text-align: center;
							}

							.audio_text {
								margin-top: 10rpx;
								text-align: center;
								color: $uni-text-color;
							}
						}

						.record_item {
							margin: 0 50rpx;

							.icon_1 {
								width: 172rpx;
								height: 172rpx;
								line-height: 172rpx;
								border: 2rpx solid #817a72;
								border-radius: 50%;
								background-color: #d77f18;
								text-align: center;
							}

							.icon_2 {
								width: 172rpx;
								height: 172rpx;
								border: 2rpx solid #817a72;
								border-radius: 50%;
								background-color: #ebbf8c;
								position: relative;

								&::after {
									content: '';
									display: block;
									width: 58rpx;
									height: 58rpx;
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
									background-color: #ff0000;
									border-radius: 10rpx;
								}
							}

							.record_text {
								margin-top: 10rpx;
								text-align: center;
								color: $uni-text-color;
							}
						}
					}

					.pin_item {

						.icon {
							text-align: right;
						}

						.item_inp1 {
							margin: 50rpx 0;

							.item {
								width: 100rpx;
								height: 100rpx;
								line-height: 70rpx;
								padding: 10rpx;
								margin-left: 20rpx;
								border-radius: 8rpx;
								border: 2rpx solid $uni-border-color;
								text-align: center;

								.after {
									width: 100%;
									height: 100%;
									border-bottom: 10rpx solid $uni-bg-color-mask;
								}
							}
						}

						.pin_item_text {
							text-align: center;

							.text1 {
								font-size: 36rpx;
								font-weight: 600;
							}

							.text2 {
								margin-top: 20rpx;
								color: $uni-text-color;
							}
						}

						.item_inp2 {
							margin-top: 50rpx;

							.item {
								height: 100rpx;
								line-height: 80rpx;
								padding: 10rpx 30rpx;
								margin-left: 20rpx;
								border-radius: 8rpx;
								background-color: $uni-bg-color-opacity;
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}

					.lian_item {
						width: 100%;
						position: absolute;
						bottom: 5%;

						.lian_item_list {
							width: 80%;
							height: 100rpx;
							line-height: 100rpx;
							margin: 0 auto 50rpx;
							text-align: center;
							box-shadow: 4rpx 6rpx 16rpx #c2c2c2;
							border-radius: 12rpx;
						}
					}
				}
			}
		}

		.btns {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 112rpx);
			padding: 30rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
			background-color: #eff4ff;

			.icons {
				display: flex;

				.icon_item {
					margin-right: 16rpx;
				}
			}

			.btn {
				width: 160rpx;
				height: 100%;
				line-height: 50rpx;
				text-align: center;
				border-radius: 50rpx;
				font-size: 28rpx;
				color: #ffffff;
				border: 1rpx solid $uni-border-color;
				margin-left: 20rpx;
				background-color: #787aff;
			}
		}

		.spelling_popup {
			width: 500rpx;
			height: 100vh;

			.popup_title {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
			}

			.popup_word_item {
				margin: 0 30rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid;

				.text {
					font-size: 28rpx;
				}
			}
		}
	}
</style>